<template>
  <a-row type="flex" style="flex-flow: inherit;">
    <a-col flex="auto">
      <a-card class="topBox" :bordered="false" style="margin-bottom: 10px">
        <!-- 查询区域 -->
        <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="onQuery">
          <a-row>
            <a-col :span="7">
              <a-form-model-item label="人员姓名">
                <a-input v-model="pageFilter.name" placeholder="请输入" />
              </a-form-model-item>
            </a-col>
            <a-col :span="7">
              <a-form-model-item label="职务/身份">
                <a-select v-model="pageFilter.post" placeholder="请选择" allowClear style="width:100%;">
                  <a-select-option value="0">全部</a-select-option>
                  <a-select-option v-for="(item, key) in jobArr" :key="key" :value="item.value">{{ item.title }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="7">
              <a-form-model-item label="身份证">
                <a-input v-model="pageFilter.identification" placeholder="请输入" />
              </a-form-model-item>
            </a-col>
            <a-col :span="4">
              <a-form-model-item :wrapper-col="{ offset: 0 }" style="margin-bottom: 0">
                <a-button type="primary" @click="onQuery"> 查询 </a-button>
                <a-button style="margin-left: 10px" @click="onResetForm"> 重置 </a-button>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-card>
      <a-card :bordered="false">
        <!-- 操作按钮区域 -->
        <div class="table-operator">
          <a-button type="primary" @click="onAdd()">添加工作小组成员</a-button>
          <a-button @click="onOut()">导出</a-button>
        </div>
        <!-- 表格展示 -->
        <div class="table-page-content">
          <z-table ref="table" rowKey="id" :showAlert="false" :showSelection="false" :loading="loading"
            :columns="columns" :dataSource="pageData" @change="onTableChange">
            <template slot="gender" slot-scope="text">
              <span v-if="text == '1'">男</span>
              <span v-if="text == '2'">女</span>
            </template>
            <template slot="post" slot-scope="text">
              <span>{{ setTittle(text) }}</span>
            </template>
            <!--操作-->
            <template slot="action" slot-scope="text, record">
              <a-button @click="onEdit(record)" type="link" style="padding: 0">编辑</a-button>
              <a-divider type="vertical" />
              <a-popconfirm title="是否要删除记录吗?" ok-text="是" cancel-text="否" @confirm="onDelete(record)">
                <a>删除</a>
              </a-popconfirm>
              <a-divider type="vertical" />
              <a-button @click="onDetail(record)" type="link" style="padding: 0">查看</a-button>
            </template>
          </z-table>
        </div>
      </a-card>
    </a-col>
    <AddUserModal ref="addUserModalId" @ok=onQuery :title=title />
  </a-row>
</template>

<script>
import AddUserModal from './modules/AddUserModal'
import { getDictItemsFromCache } from '@/api/api'
import { downLoadFileReader } from '@/utils/export-util/util'
import * as groupApi from '@/api/sjsk/groupManage.js'
export default {
  components: { AddUserModal },
  data() {
    return {
      labelCol: { span: 6 },
      wrapperCol: { span: 17 },
      loading: false,
      visible: false,
      reloading: false,
      jobArr: getDictItemsFromCache('groupPost'),
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '姓名',
          dataIndex: 'name',
          align: 'center',
        },
        {
          title: '性别',
          dataIndex: 'gender',
          align: 'center',
          scopedSlots: { customRender: 'gender' },
        },
        {
          title: '年龄',
          dataIndex: 'age',
          align: 'center',
        },
        {
          title: '身份证号',
          dataIndex: 'identification',
          align: 'center',
        },
        {
          title: '职务/身份',
          dataIndex: 'post',
          align: 'center',
          scopedSlots: { customRender: 'post' },
        },
        {
          title: '联系方式',
          dataIndex: 'telphone',
          align: 'center',
        },
        {
          title: '参与小组数',
          dataIndex: 'groupNum',
          align: 'center',
        },
        {
          title: '添加时间',
          dataIndex: 'createTime',
          align: 'center',
        },
        {
          title: '操作',
          width: 160,
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      pageData: {},
      title: ""
    }
  },
  created() {
    this.onQuery()
  },
  methods: {
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.pageFilter = {
        pageNo: 1,
        pageSize: 10
      }
      this.refreshTable()
    },
    onTimeChange() {

    },
    onStatusChange() {

    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    refreshTable() {
      this.loading = true
      groupApi.pageNewGroup(this.pageFilter).then((res) => {
        if (res.success) {
          this.pageData = res.result ? res.result : {}
          this.loading = false
        } else {
          this.loading = false
        }
      })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    onAdd() {
      this.title = "添加工作小组成员"
      this.$refs.addUserModalId.show()
    },
    onEdit(record) {
      this.title = "编辑工作小组成员"
      this.$refs.addUserModalId.show(record)
    },
    onDelete(record) {
      groupApi.deleteGroup({ id: record.id }).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.onQuery()
        } else {
          this.$message.warn(res.message)
        }
      })
        .catch((e) => {
          this.$message.warn('请求失败！')
        })
    },
    onDetail(record) {
      this.$router.push({
        path: "/groupManage/userRecord",
        query: {
          id: record.id
        }
      })
    },
    setTittle(text) {
      return this.$filterDictTextByCache('groupPost', text)  //现在字典中对应的文字，是全局函数
    },
    onOut() {
      groupApi.exportGroup(this.pageFilter).then(async res => {
        const fileName = '小组成员.xls'
        await downLoadFileReader(res, fileName)
      })
    },
    /** 重新加载组件 */
    reload() {
      this.reloading = true
      this.$nextTick(() => (this.reloading = false))
    },
  },
}
</script>
<style lang="less" scoped>
.topBox /deep/.ant-row {
  margin-bottom: 0;
}

/deep/.ant-col-7 {
  width: 28%;
}

/deep/.ant-col-4 {
  width: 16%;
}
</style>
